<template>
    <el-form :model="formData" label-width="100px">
        <el-form-item label="性别">
            <div class="check-box">
                <el-checkbox
                    v-model="checkAllSex"
                    class="all-check"
                    :indeterminate="isIndeterminateSex"
                    @change="allSex">
                    全部
                </el-checkbox>
                <el-checkbox-group v-model="formData.sex" @change="changSex">
                    <el-checkbox :label="1">男</el-checkbox>
                    <el-checkbox :label="2">女</el-checkbox>
                    <el-checkbox :label="0">未知</el-checkbox>
                </el-checkbox-group>
            </div>
        </el-form-item>
        <el-form-item label="年龄">
            <div class="check-box">
                <el-checkbox
                    v-model="checkAllAge"
                    class="all-check"
                    :indeterminate="isIndeterminateAge"
                    @change="allAge">
                    全部
                </el-checkbox>
                <el-checkbox-group v-model="formData.age" @change="changeAge">
                    <el-checkbox :label="6">60后</el-checkbox>
                    <el-checkbox :label="7">70后</el-checkbox>
                    <el-checkbox :label="8">80后</el-checkbox>
                    <el-checkbox :label="9">90后</el-checkbox>
                    <el-checkbox :label="0">00后</el-checkbox>
                    <el-checkbox :label="1">10后</el-checkbox>
                    <el-checkbox :label="5">未知</el-checkbox>
                </el-checkbox-group>
            </div>
        </el-form-item>
        <el-form-item class="form-item" label="生日周期">
            <div>
                <el-date-picker
                    v-model="formData.birthday"
                    type="daterange"
                    style="width: 300px"
                    start-placeholder="开始周期"
                    end-placeholder="结束周期"
                    format="MM-DD"
                    value-format="MM-DD"></el-date-picker>
            </div>
        </el-form-item>
        <el-form-item class="form-item">
            <template #label>
                <span>添加时间</span>
                <el-tooltip effect="light">
                    <template #content>
                        <div>客户添加第一个企微员工的时间。</div>
                    </template>
                    <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                </el-tooltip>
            </template>
            <el-button :class="addTimes == 3 ? 'time-color' : ''" @click="changeTime(3, 1)"> 近3天 </el-button>
            <el-button :class="addTimes == 7 ? 'time-color' : ''" @click="changeTime(7, 1)"> 近7天 </el-button>
            <el-button :class="addTimes == 15 ? 'time-color' : ''" @click="changeTime(15, 1)"> 近15天 </el-button>
            <el-button :class="addTimes == 30 ? 'time-color' : ''" @click="changeTime(30, 1)"> 近30天 </el-button>
            <el-button :class="addTimes == -2 ? 'time-color' : ''" @click="changeTime(-2, 1)">近N天</el-button>
            <el-input-number
                v-if="addTimes == -2"
                v-model.number="friend_day"
                class="right-input"
                :controls="false"
                :precision="0"
                :min="1"
                :max="1000"
                @blur="changeFriendDay"></el-input-number>
            <el-button :class="addTimes == 0 ? 'time-color' : ''" @click="changeTime(0, 1)"> 自定义 </el-button>
            <el-date-picker
                v-if="showAddTime"
                v-model="formData.add_friend_time"
                type="datetimerange"
                class="right-picker"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 380px; margin-left: 10px; vertical-align: middle"></el-date-picker>
            <el-button :class="addTimes == -1 ? 'time-color' : ''" class="right-item" @click="changeTime(-1, 1)">
                不限制
            </el-button>
        </el-form-item>
        <el-form-item class="form-item">
            <template #label>
                <span>创建时间</span>
                <el-tooltip effect="light">
                    <template #content>
                        <div>客户入库的时间。</div>
                    </template>
                    <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                </el-tooltip>
            </template>
            <el-button :class="custTimes == 3 ? 'time-color' : ''" @click="changeTime(3, 2)"> 近3天 </el-button>
            <el-button :class="custTimes == 7 ? 'time-color' : ''" @click="changeTime(7, 2)"> 近7天 </el-button>
            <el-button :class="custTimes == 15 ? 'time-color' : ''" @click="changeTime(15, 2)"> 近15天 </el-button>
            <el-button :class="custTimes == 30 ? 'time-color' : ''" @click="changeTime(30, 2)"> 近30天 </el-button>
            <el-button :class="custTimes == -2 ? 'time-color' : ''" @click="changeTime(-2, 2)">近N天</el-button>
            <el-input-number
                v-if="custTimes == -2"
                v-model.number="cust_day"
                class="right-input"
                :controls="false"
                :precision="0"
                :min="1"
                :max="1000"
                @blur="changeCustDay"></el-input-number>
            <el-button :class="custTimes == 0 ? 'time-color' : ''" @click="changeTime(0, 2)"> 自定义 </el-button>
            <el-date-picker
                v-if="showLastTime"
                v-model="formData.add_cust_time"
                type="datetimerange"
                class="right-picker"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 380px; margin-left: 10px; vertical-align: middle"></el-date-picker>
            <el-button :class="custTimes == -1 ? 'time-color' : ''" class="right-item" @click="changeTime(-1, 2)">
                不限制
            </el-button>
        </el-form-item>
        <el-form-item class="form-item" label="客户来源">
            <el-select
                v-model="formData.cust_source"
                multiple
                placeholder="请选择"
                style="width: 320px"
                @change="changeSource">
                <el-option v-for="item in sourceList" :key="item.id" :label="item.name" :value="item.id">
                    {{ item.name }}
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item class="form-item" label="选择群聊">
            <div>
                <el-select v-model="formData.chat_group_all" clearable style="width: 320px">
                    <el-option label="满足任意选中的群聊" :value="1" />
                    <el-option label="满足所有选中的群聊" :value="2" />
                    <el-option label="不包含选中的群聊" :value="3" />
                </el-select>
                <el-button v-show="formData.chat_group_all" class="right-item" @click="openGroup">选择群聊</el-button>
                <div v-if="tableList.length" class="group-list">
                    <div v-for="(item, index) in tableList" :key="index" class="list-item">
                        <img
                            class="del-img"
                            width="16"
                            height="16"
                            src="@/assets/customer/del.png"
                            alt="删除"
                            @click="delGroup(item)" />
                        <div class="item-img">
                            <img
                                width="36"
                                height="36"
                                style="border-radius: 4px"
                                :src="`${item?.avatar ?? '@/assets/customer/group_avatar.png'}`"
                                alt="" />
                        </div>
                        <div class="item-tips">
                            <div class="item-title">{{ item.name || '--' }}</div>
                            <div class="item-text">群主：{{ item.manager.name || '暂无' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-form-item>
        <el-form-item class="form-item" label="选择标签">
            <div>
                <el-select v-model="formData.cust_tag_list_all" clearable style="width: 320px">
                    <el-option label="满足任意选中的标签" :value="1" />
                    <el-option label="满足所有选中的标签" :value="2" />
                    <el-option label="不包含选中的标签" :value="3" />
                </el-select>
                <el-button v-show="formData.cust_tag_list_all" class="right-item" @click="opentag">选择标签</el-button>
                <div v-if="taglist.length" class="zw-el-tags">
                    <el-tag
                        v-for="(item, index) in taglist"
                        :key="index"
                        class="tagsItem"
                        closable
                        @close="closetag(item)">
                        {{ item.name }}
                    </el-tag>
                </div>
            </div>
        </el-form-item>
    </el-form>
    <!-- 群聊 -->
    <GroupChart ref="GroupChartRef" @submit="getGroupFun" />
    <BatchLabel ref="BatchLabelRef" @save="getTagsFun" />

    <!-- <GroupChart v-if="groupChartRefVisible" ref="GroupChartRef" @submit="getGroupFun" />
  <BatchLabel v-if="batchLabelRefVisible" ref="BatchLabelRef" @save="getTagsFun" /> -->
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch, nextTick } from 'vue';
import { customerSource } from '@/api/rules';
import GroupChart from '@/components/chart/GroupChart.vue';
import BatchLabel from '@/components/BatchLabel.vue';
import { getDiffDay, getSetionId } from '@/utils/utils';
import { getDay } from '@/utils/timeCycle';
import { ElMessage } from 'element-plus';
import { useStore } from '@/store';

const BatchLabelRef = ref(null);
const departRef = ref(null);
const GroupChartRef = ref(null);
const groupChartRefVisible = ref<boolean>(false);
const batchLabelRefVisible = ref<boolean>(false);
const checkAllAge = ref(false); //是否全部选中年龄
const isIndeterminateAge = ref(); //选中年龄状态
const checkAllSex = ref(false); //是否全部选中性别
const isIndeterminateSex = ref(); //选中性别状态
const store = useStore();
const taglist = ref([]);
const friend_day = ref(60);
const cust_day = ref(60);
const formData = reactive({
    sex: [],
    age: [],
    //area: [],
    birthday: [], //生日区间
    add_friend_time: [] as any[], //添加时间
    add_friend_day: 0, //添加好友近n天 0为自定义和不限制 自定义需传add_friend_time不限制传[]
    add_cust_time: [] as any[], //创建时间
    add_cust_day: 0, //添加客户近n天 0为自定义和不限制 自定义需传add_cust_time不限制传[]
    cust_source_all: 0, //1是全部 2 是指定 3 未选中 0 默认
    cust_source: [], //客户来源
    chat_group_all: '', //1是全部 2 是指定 3 未选中 0 默认
    chat_group: [] as any[], //群信息
    cust_tag_list_all: '', //1是全部 2 是指定 3 未选中 0 默认
    cust_tag_list: [] as any[]
});
const tableList = ref([]); //选择的群聊
const props = defineProps(['cust_property']);
const defaultProps = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: true,
    label: 'name',
    value: 'id'
};
const sourceList = ref<any>([]);
//点击选择群聊
const openGroup = () => {
    if (GroupChartRef?.value) {
        GroupChartRef.value.echoTypeFlag = true;
        GroupChartRef.value.echoDataList = [].concat(tableList.value);
        GroupChartRef.value.echoDataId = getSetionId('id', formData.chat_group);
        GroupChartRef.value.appDialog.visible = true;
    }
};
// 分页基础信息
const pageInfo = reactive({
    page_size: 15,
    page: 1,
    is_qw_group: '-1'
});
const pageDta = reactive({
    page_size: 9999,
    page: 1,
    is_qw_group: '-1'
});
const formInline = reactive({
    group_leader: '',
    group_name: ''
});
const showAddTime = ref(false);
const showLastTime = ref(false);
const addTimes = ref<number | string>(-1);
const custTimes = ref(-1);
const tableData = ref([]);
// 获取群聊
const getGroupFun = (val: any) => {
    tableList.value = [];
    formData.chat_group = [];
    if (val.length > 0) {
        val.forEach((item: any) => {
            tableList.value.push(item);
            formData.chat_group.push({
                id: item.group_id,
                name: item.name
            });
        });
    }
};
//删除群聊详情
const delGroup = (data: any) => {
    formData.chat_group = [];
    tableList.value = tableList.value.filter((item: any) => {
        return item.group_id != data.group_id;
    });
    tableList.value.forEach((item: any) => {
        formData.chat_group.push({
            id: item.group_id,
            name: item.name
        });
    });
};
//选中全部性别
const allSex = (val: boolean) => {
    formData.sex = val ? [1, 2, 0] : [];
    isIndeterminateSex.value = false;
};
//切换性别
const changSex = (val: any) => {
    const checkedCount = val.length;
    checkAllSex.value = checkedCount === 3;
    isIndeterminateSex.value = checkedCount > 0 && checkedCount < 3;
};
//选中全部年龄
const allAge = (val: boolean) => {
    formData.age = val ? [0, 1, 5, 6, 7, 8, 9] : [];
    isIndeterminateAge.value = false;
};
//切换年龄
const changeAge = (val: any) => {
    const checkedCount = val.length;
    checkAllAge.value = checkedCount === 7;
    isIndeterminateAge.value = checkedCount > 0 && checkedCount < 7;
};
//切换添加时间or创建时间
const changeTime = (type: any, val: any) => {
    val == 1 ? (addTimes.value = type) : (custTimes.value = type);
    val == 1 ? (showAddTime.value = false) : (showLastTime.value = false);
    if (type != 0) {
        val == 1 ? (formData.add_friend_time = []) : (formData.add_cust_time = []);
    }
    switch (type) {
        case 3:
            return val == 1 ? (formData.add_friend_day = 3) : (formData.add_cust_day = 3);
        case 7:
            return val == 1 ? (formData.add_friend_day = 7) : (formData.add_cust_day = 7);
        case 15:
            return val == 1 ? (formData.add_friend_day = 15) : (formData.add_cust_day = 15);
        case 30:
            return val == 1 ? (formData.add_friend_day = 30) : (formData.add_cust_day = 30);
        case 0:
            val == 1 ? (formData.add_friend_day = 0) : (formData.add_cust_day = 0);
            return val == 1 ? (showAddTime.value = true) : (showLastTime.value = true);
        case -1:
            return val == 1 ? (formData.add_friend_day = 0) : (formData.add_cust_day = 0);
        case -2:
            return val == 1 ? (formData.add_friend_day = friend_day.value) : (formData.add_cust_day = cust_day.value);
    }
};
//获取客户来源
const getCustomer = () => {
    customerSource({ page: 1, page_size: 9999 }).then((res: any) => {
        if (res.data) {
            sourceList.value = [
                {
                    id: 0,
                    name: '全部来源'
                }
            ];
            res.data.forEach((item: any) => {
                if (item.status == 1) {
                    sourceList.value.push(item);
                }
            });
        }
    });
};
getCustomer();
//切换客户来源
const changeSource = (val: any) => {
    if (val.includes(0)) {
        formData.cust_source = [0];
    }
};
// 添加时间切换近N天
const changeCustDay = () => {
    formData.add_cust_day = cust_day.value || 60;
    cust_day.value = cust_day.value || 60;
};
// 创建时间切换近N天
const changeFriendDay = () => {
    formData.add_friend_day = friend_day.value || 60;
    friend_day.value = friend_day.value || 60;
};
const opentag = () => {
    BatchLabelRef.value.hasConditiion = false;
    BatchLabelRef.value.dialogData.labelChooseType = 2;
    BatchLabelRef.value.chooseDataArr = [];
    if (taglist.value.length > 0) {
        BatchLabelRef.value.chooseDataArr = [...taglist.value];
    }
    BatchLabelRef.value.dialogVisible = true;
};
const getTagsFun = (data: any) => {
    formData.cust_tag_list = [];
    taglist.value = [...data.data];
    taglist.value.forEach((item: any) => {
        formData.cust_tag_list.push({
            id: item.id,
            name: item.name
        });
    });
};
const closetag = (res: any) => {
    formData.cust_tag_list = [];
    taglist.value = taglist.value.filter((item: any) => {
        return item.id != res.id;
    });
    taglist.value.forEach((item: any) => {
        formData.cust_tag_list.push({
            id: item.id,
            name: item.name
        });
    });
};
const updateData = (val: any) => {
    val.sex.length == 0 ? (formData.sex = []) : (formData.sex = val.sex);
    if (val.sex.length == 3) {
        checkAllSex.value = true;
        isIndeterminateSex.value = false;
    } else if (val.sex.length > 0) {
        isIndeterminateSex.value = true;
    }

    val.age.length == 0 ? (formData.age = []) : (formData.age = val.age);
    val.age.length == 7 ? (checkAllAge.value = true) : '';
    if (val.age.length == 7) {
        checkAllAge.value = true;
        isIndeterminateAge.value = false;
    } else if (val.age.length > 0) {
        isIndeterminateAge.value = true;
    }
    formData.birthday = val.birthday;
    val.chat_group_all == 0 ? (formData.chat_group_all = '') : (formData.chat_group_all = val.chat_group_all);
    formData.chat_group = val.chat_group;
    val.cust_source_all == 1 ? (formData.cust_source = [0]) : (formData.cust_source = val.cust_source);
    formData.cust_source_all = val.cust_source_all;
    formData.cust_tag_list = val.cust_tag_list;
    val.cust_tag_list_all == 0
        ? (formData.cust_tag_list_all = '')
        : (formData.cust_tag_list_all = val.cust_tag_list_all);
    formData.add_friend_time = val.add_friend_time;
    formData.add_friend_day = val.add_friend_day;
    taglist.value = val.cust_tag_list;
    if (val.add_friend_time && val.add_friend_time.length > 0) {
        addTimes.value = 0;
        showAddTime.value = true;
    } else {
        if (val.add_friend_day == 0) {
            addTimes.value = -1;
        } else {
            if ([3, 7, 15, 30].includes(val.add_friend_day)) {
                addTimes.value = val.add_friend_day;
            } else {
                addTimes.value = -2;
                friend_day.value = val.add_friend_day;
            }
        }
    }
    formData.add_cust_time = val.add_cust_time;
    formData.add_cust_day = val.add_cust_day;
    if (val.add_cust_time && val.add_cust_time.length > 0) {
        custTimes.value = 0;
        showLastTime.value = true;
    } else {
        if (val.add_cust_day == 0) {
            custTimes.value = -1;
        } else {
            if ([3, 7, 15, 30].includes(val.add_cust_day)) {
                custTimes.value = val.add_cust_day;
            } else {
                custTimes.value = -2;
                cust_day.value = val.add_cust_day;
            }
        }
    }
    if (formData.chat_group.length > 0) {
        tableList.value = formData.chat_group.map(item => {
            const { id: group_id, name, avatar, owner_username } = item;
            return {
                group_id,
                avatar,
                name,
                manager: { name: owner_username }
            };
        });
    }
};
watch(
    () => props.cust_property,
    val => {
        if (val && val.id) {
            updateData(val);
        }
    }
);
defineExpose({
    formData,
    addTimes,
    custTimes
});
</script>
<style scoped lang="scss">
.form-item {
    margin: 10px 0;

    .help_icon {
        cursor: pointer;
        width: 14px;
        height: 14px;
        margin: 8px 6px 0 4px;
    }

    .right-item {
        margin-left: 10px;
    }

    .time-color {
        background-color: #ff6b00;
        color: #fff;
    }
}

.group-list {
    display: flex;
    flex-wrap: wrap;

    .list-item {
        width: 227px;
        height: 48px;
        display: flex;
        border: 1px solid #ffc69e;
        line-height: 20px;
        position: relative;
        margin: 16px 16px 0 0;

        .del-img {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
        }

        .item-img {
            margin: 6px 10px 6px 6px;
        }

        .item-tips {
            margin: 4px 0;

            .item-title {
                width: 170px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #33302d;
                font-size: 14px;
            }

            .item-text {
                color: #969696;
                font-size: 12px;
            }
        }
    }
}

.tagsItem {
    margin-right: 10px;
}

.check-box {
    display: flex;

    .all-check {
        margin-right: 30px;
    }
}

.right-input {
    width: 90px;
    margin: 0 12px;
}
</style>
